/**
 * @功能描述: 标签页样式
 * @author: lzn
 * @date: 2022-09-30 09:22:20
 * @version: 1.0
 */
@import '../../style/index.scss';

// tabs容器样式
@include b(tabs) {
  display: flex;
  &.tabs-column {
    flex-direction: column;
  }
}

// 标签页头样式
@include b(tabs-nav) {
  position: relative;
  display: flex;
  flex: auto;
  align-items: center;
  margin: 0 0 16px;
  .#{$namespace}-tabs-tab:not(:first-child) {
    margin-left: 32px;
  }
  // 标签头下边框
  &::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    content: "";
  }
}

// 标签样式
@include b(tabs-tab) {
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: $all-transition;
  // 激活标签样式
  &.tabs-active {
    color: $color-primary;
    border-bottom-color: $color-primary;
  }
}

// 标签页内容容器样式 
@include b(tabs-tabpanel) {
  display: none;
  &.tabpanel-active {
    display: block;
  }
}